<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
        <fieldset>
            <legend>
                Create New Person
            </legend>
            <div class="form-group">
                <label>Name:</label>
                <input id="name" type="text" v-model="name" />
            </div>
            <div class="form-group">
                <label>Age:</label>
                <input type="text" v-model="age" />
            </div>
            <div class="form-group">
                <label>Sex:</label>
                <select v-model="sex">
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                </select>
            </div>
            <div class="form-group">
                <label></label>
                <button @click="addPerson">Create</button>
                <button @click="findPerson">lookup</button>
            </div>
        </fieldset>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Sex</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody>
                <tr class="people_list" :key="index" v-for="(person,index) in people">
                    <td>{{person.name}}</td>
                    <td><input v-bind:value="person.age" :readonly=isReadonly /></td>
                    <td>{{ person.sex }}</td>
                    <td :class="'text-center'">
                        <button @click="deletePerson(person)">Delete</button>
                        <button @click="openEdit(person,index)">Updata</button>
                        <button class="btn_ok" :disabled=true @click="updataPerson(person,index)">ok</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <foot-bar></foot-bar>
  </div>

</template>

<script>
    export default {
      created(){
        this.getPerson();
      },
    data() {
        return {
            msg:'数据库操作测试',
            name : '',
            age : null,
            sex:'Male',
            people:[],
            isReadonly:true
        }
    },
    methods:{
      getPerson() {
        // 获取所有用户信息
        this.$axios.get('/api/wzg/getAccount')
          .then((res) => {
            // 响应成功回调
            this.people = res.data;
            // console.log(params);
            // 创建一个账号密码
            // return this.$http.post('/api/wzg/createAccount',params);
          })
          .then((response) => {
          })
          .catch((reject) => {
            console.log(3);
            console.log(reject)
          });
        },
        addPerson() {
          // 添加
          this.$axios.post('/api/wzg/createAccount',{
            name:this.name,
            age:this.age,
            sex:this.sex
          })
          .then((response) => {
            console.log('添加成功');
            console.dir(response.data);
            this.name='',
            this.age = null,
            this.sex = 'Male',
            this.getPerson();
          })
          .catch(err => {
            console.log('添加失败');
          })
        },
        deletePerson(person){
          // 删除
          let id = person._id
          this.$axios.delete(`/api/wzg/delete/${id}`)
          .then(res => {
            console.log('删除成功');
            this.getPerson();
          })
          .catch(err => {
            console.log('删除失败'+err);
          })
        },
        openEdit(person,index){
          let id = person._id
          console.log(id);
          var dom = document.getElementsByClassName('people_list')[index];
          var ipt = dom.getElementsByTagName('input')[0];
          var btn = dom.getElementsByClassName('btn_ok')[0];
          console.log(dom);
          ipt.removeAttribute('readonly');
          ipt.focus();
          btn.removeAttribute('disabled');

        },
        updataPerson(person,index){
          // 更新
          let id = person._id
          var dom = document.getElementsByClassName('people_list')[index];
          var ipt = dom.getElementsByTagName('input')[0];
          var btn = dom.getElementsByClassName('btn_ok')[0];
          var aa = ipt.value;
          console.log(id);
          console.log(aa);
          this.$axios.put(`/api/wzg/updata/${id}`,{
            age:aa
          })
          .then( res => {
            console.log('更新成功');
            ipt.setAttribute('readonly','readonly');
            btn.setAttribute('disabled','disabled');
            this.getPerson();
          })
          .catch( err => {
            console.log(err);
          })
        },
        findPerson(){
          let name = this.name;
          this.$http.get(`/api/wzg/find/${name}`)
          .then(res => {
            console.log('查找成功');
            this.people = res.data;
          })
          .catch(err => {
            console.log(err);
          })


        }
      }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
table,
td,
th {
    border-collapse: collapse;
    border-spacing: 0
}

table {
    width: 100%
}

td,
th {
    border: 1px solid #bcbcbc;
    padding: 5px 10px
}
input{
  width: 100%;
  height: 100%;
}
th {
    background: #42b983;
    font-size: 1.2rem;
    font-weight: 400;
    color: #fff;
    cursor: pointer
}

tr:nth-of-type(odd) {
    background: #fff
}

tr:nth-of-type(even) {
    background: #eee
}

fieldset {
    border: 1px solid #BCBCBC;
    padding: 15px;
}

input {
    outline: none
}

input[type=text] {
    border: 1px solid #ccc;
    padding: .5rem .3rem;
}

input[type=text]:focus {
    border-color: #42b983;
}

button {
    outline: none;
    padding: 5px 8px;
    color: #fff;
    border: 1px solid #BCBCBC;
    border-radius: 3px;
    background-color: #009A61;
    cursor: pointer;
}

button:hover {
    opacity: 0.8;
}

.form-group {
    margin: 10px;
    position: relative;
}

.form-group > label {
    display: inline-block;
    width: 10rem;
    text-align: right;
}

.form-group > input,
.form-group > select {
    display: inline-block;
    height: 2.5rem;
    line-height: 2.5rem;
}

.text-center {
    text-align: center;
}

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 21px 0;
    border-radius: 3px;
}

.pagination > li {
    display: inline;
}

.pagination > li > a {
    position: relative;
    float: left;
    padding: 6px 12px;
    line-height: 1.5;
    text-decoration: none;
    color: #009a61;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-left: -1px;
    list-style: none;
}

.pagination > li > a:hover {
    background-color: #eee;
}

.pagination .active {
    color: #fff;
    background-color: #009a61;
    border-left: none;
    border-right: none;
}

.pagination .active:hover {
    background: #009a61;
    cursor: default;
}

.pagination > li:first-child > a .p {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}

.pagination > li:last-child > a {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
}
.tip{
  position: absolute;
  left: 355px;
  top: 25px;
  font-size: 12px;
  color: red
}
.text{
  width: 182px;
  height: 34px;
    font-size: 30px;
  line-height: 34px;
  padding-left: 5px;
  border-bottom: 1px solid #333;
  margin-bottom: 10px;
}
.text + input{
  margin-bottom: 20px;
    font-size: 30px;
}
</style>
